function Ui(){
    var height = window.innerHeight,
		width = window.innerWidth,
		browser = window.navigator.appName,
		site_outer = document.getElementById('site_outer'),
		site_inner = document.getElementById('site_inner'),
		site_padding = document.getElementById('site_padding'),
		site_content = document.getElementById('content'),
		site_nav = document.getElementById('nav'),
		nav_map = document.getElementById('navmap'),
		up_arrow = document.getElementById('up_arrow'),
		right_arrow = document.getElementById('right_arrow'),
		down_arrow = document.getElementById('down_arrow'),
		left_arrow = document.getElementById('left_arrow'),
		outer_height_adjustment = 2,
		outer_width_adjustment = 2,
		mapNav = null;

    this.init = function(){
		console.log('site_outer width: ' + site_outer.clientWidth);
		console.log('site_outer height: ' + site_outer.clientHeight);
		this.sizeElements();
		console.log('site_outer width: ' + site_outer.clientWidth);
		console.log('site_outer height: ' + site_outer.clientHeight);
		this.setupWindowEvents();
		this.setupMouseEvents();
		this.loadMap();
		this.setupKeyEvents();
		//this.setupParticleAnimation();
    }

    function _handleKeyEvents(e){
		//debugger;
		console.log(e.which);
		
		var navNode = null,
			navStyleProperty = null,
			currentMapPos = mapNav.getCurrentMapPosition(),
			newPosition = null,
			navItem = null;
		
		switch(e.which){
				case 37: // left arrow
				if ( currentMapPos.x == 0 ) return false;
				newPosition = currentMapPos.x - 1;
				mapNav.updateXPosition(newPosition);
				
				navNode = left_arrow;
				break;

			case 38: // up arrow
				newPosition = currentMapPos.y + 1;
				if ( !mapNav.updateYPosition(newPosition) ) return false;
				
				navNode = up_arrow;
				break;

			case 39: // right arrow
				newPosition = currentMapPos.x + 1;
				if ( !mapNav.updateXPosition(newPosition) ) return false;
				
				navNode = right_arrow;
				break;

			case 40: // down arrow
				if ( currentMapPos.y == 0 ) return false;
				newPosition = currentMapPos.y - 1;
				mapNav.updateYPosition(newPosition);
				
				navNode = down_arrow;
				break;
		}
		navItem = mapNav.getCurrentMapItem();
		this.updateNavMap(navItem);
		
		$(navNode).addClass('selected');
		setTimeout(function(){
			$(navNode).removeClass('selected');
		},500);
    }


    this.sizeElements = function(){
		console.log(site_outer);
		//site_outer.style.width = (width - outer_width_adjustment) + 'px';
		//site_outer.style.height = (height - outer_height_adjustment) + 'px';
    }

    this.setupMouseEvents = function(){
		left_arrow.addEventListener('mouseover', function(e){
			alert('moused');
		},false);
    }

    this.setupWindowEvents = function(){
		window.addEventListener('resize', this.sizeElements, false);
    }

    this.removeWindowEvents = function(){
		window.removeEventListener('resize', this.sizeElements, false);
    }

    this.setupKeyEvents = function(){
		window.addEventListener('keyup', function(ctx)
		{
			return function(e)
			{
				_handleKeyEvents.apply(ctx, [e]);	
			}
		}(this), true);
    }

	this.loadMap = function()
	{
		mapNav = new mapNavigator();
		this.loadContent('/js/screens.json', function(data)
		{
			//console.dir(data);
			var jsonData = JSON.parse(data);
			mapNav.setMap(jsonData.navmap);
		});
	}

	this.updateNavMap = function( item )
	{
		$(nav_map).empty();
		$(nav_map).html(item.title + " : " + item.description);
	}
	
	/**
	 * Load content from a url
	 */
    this.loadContent = function( uri, callback ){
		//
		if (jQuery){
			$.ajax({
				url: uri,
				headers: {},
				data: {},
				beforeSend: function(xhr, settings){

				},
				success: function(data, status, xhr){
					callback(data);
				},
				error: function(xhr, status, error){
					callback(false);
				},
				complete: function(xhr, status){
					//
				}
			})
		}
    }


    this.setupParticleAnimation = function(){
		// Canvas creation and setup
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		var particles = [];
		var pause = false;

		nav_map.appendChild(canvas);

		canvas.width = 200;
		canvas.height = 200;
		//ctx.fillRect(0,0,400,400);


		addParticles = function(n){
			for (var i=0; i < n; i++){
				var p = new Particle();
				p.init(canvas);
				particles.push(p);
			}
		}

		removeParticles = function(){
			var n = particles.length;
			for (var i=0; i < n; i++) particles.pop();
		}

		loop = function(){
			if (pause) return;
			window.webkitRequestAnimationFrame(loop);
			ctx.clearRect(0,0,canvas.width, canvas.height);
			for(var i=0; i<particles.length;i++) particles[i].update();
			for(var i=0; i<particles.length;i++) particles[i].draw();
		}

		loopDelegate = function(){
			loop();
		}

		//var timer = setInterval(loopDelegate, 1000 / 60);
		var timer = window.webkitRequestAnimationFrame(loop);

		console.log(timer);

		addParticles(10);
    }
};